<template>
  <div class="cssAnimation_wrap">
    <p>1.圆角边框</p>
    <div id="box1"></div>

    <p>2.文字阴影</p>
    <div id="box2">coderlei</div>
    
    <p>3.盒子阴影</p>
    <div id="box3"></div>

    <p>4.线性渐变</p>
    <div id="box4"></div>
    
    <p>5.径向渐变</p>
    <div id="box5"></div>
  </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    components:{

    },
    watch:{

    },
    computed:{

    },
    created() {

    },
    mounted() {

    },
    methods: {
        
    }
}
</script>

<style scoped>
p {
  font-size: 30px;
}
#box1 {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  /* 左上右上右下左下   两个参数 八个变量 分对应 "水平半径" "垂直半径"*/  
  border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
  /* 两个值的时候 对角线  "左上右下" "右上左下"*/
  /* border-radius: 10px 20px; */
}

#box2 {
  font-size: 50px;
  /* 四个参数 "水平(可为负数)"  "垂直(可为负数)"  "模糊度"  "颜色"  可加多个阴影*/  
  /* text-shadow: 10px 1px 3px red; */
  text-shadow: 1px 1px 3px red,2px 2px 3px yellow;
}

#box3 {
  width: 200px;
  height: 200px;
  background: orange;
  /*  "水平(可为负数)"  "垂直(可为负数)"  "模糊度"  "颜色"  可加多个阴影*/  
  /* box-shadow: 5px 5px 3px red; */
  /* box-shadow: 0px 0px 10px red; */

  /* 外置阴影 20px */
  /* box-shadow: 0px 0px 10px 20px red; */
  
  /* inset内置阴影 */
  box-shadow: 10px 10px inset;

  /* 逗号分割 多个阴影 */
  box-shadow: 0px 0px 5px 5px red,0px 0px 5px 10px orange,0px 0px 5px 15px yellow,0px 0px 5px 20px green;
}

#box4 {
  width: 300px;
  height: 300px;
  border: 1px solid pink;
  /* 线性渐变  他属于背景图片*/
  /* background-image: linear-gradient(red,green,yellow,blue,orange); */
  /* chrome safari */
  /* background-image: -webkit-linear-gradient(red,green,yellow,blue,orange); */
  /* 火狐浏览器 */
  /* background-image: -moz-linear-gradient(red,green,yellow,blue,orange); */
  /* 欧鹏浏览器 */
  /* background-image: -o-linear-gradient(red,green,yellow,blue,orange); */

  /* 位置 */
  /* background: linear-gradient(to top,blue,yellow); */
  /* background: linear-gradient(to left,blue,yellow); */
  /* background: linear-gradient(to right,blue,yellow); */
  /* background: linear-gradient(to right bottom,blue,yellow); */
  /* 角度 可为负数*/
  /* background: linear-gradient(45deg,blue,yellow); */
  
  /* 重复设置线性渐变 */
  background: repeating-linear-gradient(blue 20%,yellow 40%);
}

#box5 {
  width: 200px;
  height: 300px;
  border: 1px solid pink;

  /* background: radial-gradient(circle,blue,yellow); */
  /* 
    中心（at center center）
      语法（at x y）都是从左上角原点为参照点
      x,y可以是像素 也可以是百分比
  */
  /* background: radial-gradient(at 10px 20px,blue,yellow); */
  /* background: radial-gradient(at 50% 50%,blue,yellow); */

  /* 形状 默认ellipse椭圆 circle圆形*/
  /* background: radial-gradient(ellipse at 10% 10%,blue,yellow); */
  /* background: radial-gradient(circle,blue,yellow); */

  /* 
    大小
      最近边 closest-side
      最远边 farthest-side
      最近角 closest-corner
      最远角 farthest-corner
   */
   background: radial-gradient(ellipse closest-side at 20% 20%,blue,yellow);
}
</style>